<template>
    <div class="ProItem">
        <div class="ItemHead">
            <ul class="item">
                <li class="Item-Check"><input type="checkbox"></li>
                <li class="Item-Img">爱果果水果店</li>
                <li class="Item-Stan">规格</li>
                <li class="Item-Price">单价</li>
                <li class="Item-Amount">数量</li>
                <li class="Item-Sum">金额</li>
                <li class="Item-Oper">操作</li>
            </ul>
        </div>
        <div class="ItemCon">
            <ul>
                <li>
                    <ul class="item">
                        <li class="Item-Check"><input type="checkbox"></li>
                        <li class="Item-Img"><img src="../../assets/img/3/shiliu.png"></li>
                        <li class="Item-Stan">8个装</li>
                        <li class="Item-Price">￥569</li>
                        <li class="Item-Amount">
                            <div>
                                <button>-</button>
                                <input type="text">
                                <button>+</button>
                            </div>
                        </li>
                        <li class="Item-Sum">￥569</li>
                        <li class="Item-Oper"><span>删除</span></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="ItemSum">
            <div>商品金额<span>￥108</span></div>
        </div>
    </div>
</template>
<script>
export default {
    name:"proitem",
    // props:{
    //     items:Object
    // }

}
</script>
<style scoped>
    .ProItem{
        width:100%;
        border:1px solid #e9e9e9;
    }
    .ProItem .ItemHead{
        width:100%;
        height:40px;
        background: #f2f2f2;
    }
    .ItemHead ul{
        width:100%;
        height:100%;
    }
    .ItemHead ul li{
        line-height: 40px;
    }
    .Item-Check{
        width:4%;
    }
    .Item-Img{
        width:28%;
    }
    .Item-Img img{
        height:100px;
        border:1px solid #dedede;
        margin:9px 0;
    }
    .ProItem ul .Item-Img{
        text-align: left;
    }
    .Item-Stan{
        width:12%;
    }
    .Item-Price{
        width:12%;
    }
    .Item-Amount{
        width: 16%;
    }
    .Item-Amount div{
        width:60%;
        height:30px;
        border:1px solid #d3d3d3;
        margin: 45px auto;
        clear: both;
    }
    .Item-Amount div button{
        width: 24%;
        height:100%;
        border: none;
        float: left;
    }
    .Item-Amount div input{
        width:50%;
        height:100%;
        border:none;
        float: left;
        border-left:1px solid #d3d3d3;
        border-right:1px solid #d3d3d3;
    }
    .Item-Sum{
        width:12%;
    }
    .Item-Oper{
        width:16%;
    }
    .item{
        width:100%;
        height:100%;
    }
    .item>li{
        float: left;
        text-align: center;
    }
    .ItemCon>ul>li{
        width:100%;
        height:120px;
        border-bottom:1px solid #e9e9e9;
    }
    .ItemCon>ul>li>ul li{
        line-height: 120px;
    }
    .ItemSum{
        width:100%;
        height:80px;
        line-height: 80px;
    }
</style>